<template>
  <div class="wrapper">
    <el-form
      :model="ruleForm"
      label-width="120px"
      :rules="rules"
      ref="ruleForm"
      :disabled="disable"
      :inline="true"
      class="demo-ruleForm"
    >
      <el-form-item label="设备型号" prop="model_number">
        <el-select
          v-model="ruleForm['model_number']"
          placeholder="请选择"
          clearable
          filterable
        >
          <el-option
            v-for="item in packageData"
            :label="item.item_name"
            :value="item.item_name"
            :key="item.item_code"
            >{{ item.item_name }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item label="数量" prop="number">
        <el-input v-model="ruleForm.number"></el-input>
      </el-form-item>
      <el-form-item label="租赁/购买" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio label="0">租赁</el-radio>
          <el-radio label="1">购买</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="ruleForm.type === '0'"
        label="天数"
        prop="is_expiration"
      >
        <el-input v-model="ruleForm.is_expiration"></el-input>
      </el-form-item>
    </el-form>
    <div
      style="margin-top: 20px; text-align: center; padding-bottom: 20px"
      v-if="!disable"
    >
      <el-button @click="cancelFn">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { dictionanryList } from "@/page/material/common/common";
import { DeviceOrderDetail, DeviceOrderUpdate } from "@/api/app.js";
export default {
  name: "deviceOrder",
  components: {},
  props: ["mode", "id"],
  data() {
    return {
      packageData: [],
      ruleForm: {},
      rules: {
        model_number: [
          { required: true, message: "请选择设备型号", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    disable: function () {
      return this.mode === "detail";
    },
  },
  watch: {
    mode: {
      handler: function (newValue, oldValue) {
        this.handleChangeMode();
      },
      immediate: true,
    },
    id: {
      handler: function (newValue, oldValue) {
        this.handleChangeMode();
      },
      immediate: true,
    },
  },
  mounted() {
    dictionanryList(["thermosphere", "divide_way", "Package_model"]).then(
      (res) => {
        this.packageData = res.data.list["Package_model"];
      }
    );
  },
  methods: {
    handleChangeMode() {
      if (this.mode === "detail" || this.mode === "edit") {
        DeviceOrderDetail({ id: this.id }).then((res) => {
          // console.log(res, 'res-----------');
          const data = res.data.data;
          // 暂时测试
          // data.step = data.Step;
          this.ruleForm = data;
        });
      }
    },

    cancelFn() {
      this.$emit("close");
    },
    handleSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        if (this.ruleForm.type === "1") {
          this.ruleForm.is_expiration = "";
        }
        DeviceOrderUpdate(this.ruleForm).then((res) => {
          if (res.code === 10000) {
            this.$message({
              message: this.mode === "add" ? "创建成功" : "修改成功",
              type: "success",
            });
            // console.log(res);
            this.$emit("close", true);
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>